<template>
  <div class="app-container">
    <!--工具栏-->
    <div  style="margin-top: 20px">
      <el-form size="small" label-width="100px">
        <el-row :gutter="10">
          <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
            <el-form-item label="用餐日期">
              <el-date-picker
                v-model="query.mealDate"
                align="right"
                unlink-panels
                class="fl1"
                format="yyyy - MM - dd "
                value-format="yyyy-MM-dd"
                default-value
                range-separator=""
                placeholder="开始日期"
              />
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
            <el-form-item label="姓名">
              <el-input v-model="query.name" placeholder="会员名称"/>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
            <el-form-item label="电话">
              <el-input v-model="query.phone" placeholder="电话"/>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
            <el-form-item label="用餐时间段">
              <el-select v-model="query.mealTime" clearable class="edit-input" placeholder="请选择" style="width:100%">
                <el-option
                  v-for="(item,index) in dinnerTimeList"
                  :key="index"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-button style="margin:20px 0 0 100px" type="primary" size="mini" @click="onGet">搜索</el-button>
        </el-row>
      </el-form>
    </div>
    <div class="head-container">
      <div style="margin:20px 0 0 50px">
        <el-button
          slot="right"
          class="filter-item"
          size="mini"
          type="success"
          icon="el-icon-remove-outline"
          :loading="false"
          @click="reservation"
          :disabled="selections.length !== 1"
        >
          预定
        </el-button>
        <el-button
          slot="right"
          class="filter-item"
          size="mini"
          type="success"
          icon="el-icon-remove-outline"
          @click="onGet"
        >
          刷新
        </el-button>
      </div>
      <!--表单组件-->
      <el-table
        ref="table"
        stripe
        border
        :data="data"
        size="small"
        style="width: 100%"
        row-key="id"
        :tree-props="{children: 'contentList'}"
        @selection-change="selectionChangeHandler"
      >
        <el-table-column type="selection" width="55" />
        <el-table-column  prop="label" label="包厢名称" />
        <el-table-column  prop="remark"  label="人数" />
        <el-table-column   label="是否预定" >
          <template slot-scope="{row}">
            {{ row.children && '是'}}
          </template>
        </el-table-column>
        <el-table-column  prop="name"  label="预定人" />
        <el-table-column  prop="mealDate" width="300"   label="预约时间" />
        <el-table-column  prop="mealTime"    label="用餐时间" >
          <template slot-scope="{row}">
            {{ getMealTime(row.mealTime) }}
          </template>
        </el-table-column>
        <el-table-column prop="phone"  label="联系方式" />
        <el-table-column prop="count"  label="预定人数"/>
        <el-table-column label="操作" fixed="right" align="center">
          <template slot-scope="{row}">
            <el-button
              class="el-icon-delete opration_icon_btn"
              v-if="row.pid"
              style="border: none;width: auto;height: auto"
              @click="del(row)"></el-button>
          </template>
        </el-table-column>
      </el-table>
      <!--分页组件-->
      <j-dialog style="width:20%" title="预定信息" :visible.sync="showResercation">
        <div v-loading="loading">
          <el-form label-width="80px" >
            <el-form-item label="客户">
              <table-select
                :tableColumns="[
                    { prop: 'code', label: '客户编码', width: '100' },
                    { prop: 'name', label: '客户名称', width: '150' },
                    { prop: 'phone', label: '电话' },
                  ]"
                :multiple="false"
                :isTab="false"
                labelKey="name"
                valueKey="id"
                width="700"
                mask
                @changeVal="setName"
                :value.sync="val"
                @change="setName"
                placeholder="请选择客户"
                url="api/dropDown/basCustomerList"
              ></table-select>
            </el-form-item>
            <el-form-item label="预约时间">
            <el-date-picker
              v-model="form.mealDate"
              type="date"
              style="width: 100%;"
              format="yyyy - MM - dd "
              value-format="yyyy-MM-dd"
              default-value
              placeholder="选择日期">
            </el-date-picker>
            </el-form-item>
            <el-form-item label="电话">
              <el-input type="number" v-model="form.phone"/>
            </el-form-item>
            <el-form-item label="人数">
              <el-input type="number" v-model="form.count"/>
            </el-form-item>
            <el-form-item label="用餐时间">
              <el-select v-model="form.mealTime" class="edit-input" placeholder="请选择" style="width:100%">
                <el-option
                  v-for="(item,index) in dinnerTimeList"
                  :key="index"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
          </el-form>
          <div class="flex" style="justify-content: right">
            <el-button @click="save('1')" type="success">保存</el-button>
          </div>
        </div>

      </j-dialog>
    </div>
  </div>
</template>

<script>
import JDialog from '../../../components/jDialog/jDialog.vue'
import {
  addReservationBox,
  delReservationBox,
  getReservationBox,
  updateReservationBox
} from '../../../api/erp/reservationBox'
import crudOperation from '@crud/CRUD.operation'
import Treeselect from '@riophae/vue-treeselect'
// crud交由presenter持有
export default {
  name: "activeCustomerCoupon",
  components: { Treeselect, JDialog },
  data() {
    return {
      data:[],
      query:{
        mealDate:'',
        phone:''
      },
      showResercation:false,
      form:{
        customerName:"",
        phone:'',
        count:0,
        mealDate:'',
        mealTime:null
      },
      val:null,
      dinnerTimeList:[{label:'午宴',value:'0'},{label:'晚宴',value:'1'}],
      selections:[],
      loading:false,

    };
  },
  watch: {},
  created() {
    this.onGet()
  },
  mounted() {

  },
  methods: {
    onGet(){
      getReservationBox({...this.query,size:999}).then(res=>{
        for(let item of res.data.content){
          if (!item.contentList)continue
          for(let i of item.contentList){
            i.id = i.phone
            i.pid = item.id
          }
        }
        this.data = res.data.content
      })
    },
    del(row){
      const data = {id:row.pid,advanceNo:row.advanceNo}
      this.loading = true
      delReservationBox(data).then(res=>{
        if (res.status === 200){
          this.$message.success('操作成功')
          this.loading = false
          this.showResercation = false
          this.form = {
            customerName:"",
            phone:'',
            count:0
          }
          this.onGet()
        }else {
          this.$message.error(res.msg)
          this.showResercation = false
        }
      })
    },
    save(){
      const content = this.selections[0].contentList || []
      // if(!this.form.id)this.form.id = new Date().getTime().toString()
      const ifReservation = this.selections[0].contentList && this.selections[0].contentList.some(item=>item.mealTime === this.form.mealTime && item.mealDate === this.form.mealDate)
      if (ifReservation) return this.$message.error('时间段已被预定')
      this.loading = true
      addReservationBox({...this.form,id:this.selections[0].id}).then(res=>{
        if (res.status === 200){
          this.$message.success('操作成功')
          this.loading = false
          this.showResercation = false
          this.form = {
            customerName:"",
            phone:'',
            count:0
          }
          this.onGet()
        }else {
          this.$message.error(res.msg)
          this.showResercation = false
        }
      })
    },
    getMealTime(type){
      if (type === '0')return'午宴'
      if (type === '1')return'晚宴'
    },
    setName(e){
      if (typeof e === 'string'){
        this.form.name = e
      }else {
        this.form.phone = e.contactPhone
        this.form.name = e.name
      }

    },
    selectionChangeHandler(val){
      this.selections = val
    },
    reservation(){
      if (this.selections[0].pid)return
      this.showResercation = true
    },
  },

};
</script>

<style lang="scss" scoped>

</style>
